<template>
    <view class="p-l-r">
        <template v-for="row in dataRows" :key="row.id">
            <view class="log-item" @tap="nav(row.deviceId, row.id, row.status)">
                <view class='m-t-10'><nut-tag :type="status(row.status)">{{ CHARGE_ORDER_STATUS[row.status] }}</nut-tag></view>
                <view>设备：<text user-select>{{ row.deviceId }}</text> #{{ PORT_NAME[row.port] }}</view>
                <view class='m-t-10'>下单时间：{{ parseTime(row.createTime) }}</view>
                <template v-if="row.status == 2">
                    <view class='m-t-10'>结束时间：{{ parseTime(row.endTime) }}</view>
                </template>
            </view>
        </template>
    </view>
    <LoadMore key-name="id" :api="page" @finish="finish" />
</template>

<script lang="ts" setup>
    import { pageApi } from '@/api/PrivateChargeRecord';
    import LoadMore from '@/components/LoadMore/index.vue'
    import { CHARGE_ORDER_STATUS, PORT_NAME } from '@/constant';
    import { parseTime } from '@/utils';
    import { navigateTo, useRouter } from '@/utils/framework';
    import { ref } from 'vue';

    const router = useRouter()

    const deviceId = Number(router.params.id)

    function page(params:any){
        return pageApi({...params, deviceId})
    }
    
    function status(s) {
        if(s == 0) {
            return ''
        }

        if(s == 1) {
            return 'primary'
        }
        if(s == 2) {
            return 'success'
        }

        if(s == 3) {
            return 'danger'
        }


    }
    

    const dataRows = ref<any[]>([])

    function finish(rows:any[]) {
        dataRows.value.push(...rows)
    }

    function nav(deviceId:number, id:number, status:number) {
        navigateTo(status == 1 ? ('/chargeOrder/pages/charging/index?private=1&device=' + deviceId) : ('/chargeOrder/pages/detail/index?private=1&id=' + id))
    }


</script>

<style lang="scss" src="./index.scss"></style>